import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Row, Col, Breadcrumb, Timeline, Spin } from 'antd';
import Title from '../../common/Title';
import WHLabel from '../../common/WH-Label';
import Prompt from '../../common/Prompt';
import api from '../../../api/api';
import { connect } from '../../../states/insurance/insuranceOrderInfo';
import CustomerCart from '../../customerCenter/CustomerCard';
import { connectRouter } from '../../../mixins/router';
import '../InsuranceOrder/index.css';

const PatientOrderStatusChoices = [
  {
    value: '10',
    label: '待激活',
  },
  {
    value: '98',
    label: '已终止',
  },
  {
    value: '99',
    label: '已完成',
  },
];

function getLabel(itemMap, itemValue) {
  const item = itemMap.find((i) => i.value == itemValue);
  return item ? item.label : '';
}

class InsuranceOrderInfo extends Component {
  constructor(props) {
    super(props);
    this.insuranceId = this.props.match.params.insuranceId;
    this.state = {
      infoData: {},
      customerCardVisible: false, // 会员弹窗
      currentCustomerId: null,
    };
  }

  componentWillMount() {
    this.init();
  }

  init = async () => {
    const data = await api.queryPackagesInfo(this.insuranceId);
    this.setState({
      infoData: data,
    });
  };

  // 显示会员卡片
  showCustomerCard = (id) => {
    this.setState({
      customerCardVisible: true,
      currentCustomerId: id,
    });
  };
  hideCustomerCard = () => {
    this.setState({
      customerCardVisible: false,
      currentCustomerId: null,
    });
  };

  render() {
    const { infoData } = this.state;
    return (
      <Spin spinning={this.props.insuranceOrderInfo.status === 'pending'}>
        <div className="insurance_order_info">
          <CustomerCart
            id={this.state.currentCustomerId}
            visible={this.state.customerCardVisible}
            hideCustomerCard={this.hideCustomerCard}
          ></CustomerCart>

          <Breadcrumb className="breadcrumb-box">
            <Breadcrumb.Item>
              <Link to={'/physicalExaminationList'}>体检订单列表</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>体检订单详情</Breadcrumb.Item>
          </Breadcrumb>

          <Title text="体检订单号" num={infoData.orderNo} left={5}>
            <Prompt text={getLabel(PatientOrderStatusChoices, infoData.status) || '未知'} />
          </Title>

          <div style={{ backgroundColor: '#fff' }}>
            <Row className="label-box" gutter={40}>
              <Col className="label-col" span={8}>
                <Link to={`/patientInsuranceDetail/${infoData.insuranceOrderId}`}>
                  <WHLabel
                    title="服务单号："
                    style={{ textDecoration: 'underline', cursor: 'pointer' }}
                    text={infoData.insuranceOrderNo}
                  />
                </Link>
              </Col>
              <Col className="label-col" span={8}>
                <WHLabel title="服务效期：" text={`${infoData.startDate || '-'}至${infoData.endDate || '-'}`} />
              </Col>
              <Col className="label-col" span={8}>
                <WHLabel title="体检产品：" text={infoData.insuranceProductName || '-'} />
              </Col>
            </Row>

            <Row className="label-box" gutter={40}>
              <Col className="label-col" span={8}>
                <WHLabel title="体检产品编码：" text={infoData.insuranceProductCode || '-'} />
              </Col>

              <Col className="label-col" span={8}>
                <WHLabel title="是否使用套餐卡密：" text={infoData.mecCardsClose === 1 ? '是' : '否'} />
              </Col>
              {infoData.mecCardsClose === 1 ? (
                <Col className="label-col" span={8}>
                  <WHLabel title="体检套餐：" text={infoData.cardPackageTitle || '-'} />
                </Col>
              ) : null}
            </Row>

            <Title text="服务对象" left={5} />
            <div className="table-box tableBox">
              <Row className="label-box" gutter={40}>
                <Col className="label-col" span={8}>
                  <div style={{ cursor: 'pointer' }} onClick={() => this.showCustomerCard(infoData.insuredId)}>
                    <WHLabel
                      title="服务对象："
                      style={{ textDecoration: 'underline', cursor: 'pointer' }}
                      text={infoData.name || '-'}
                    />
                  </div>
                </Col>
              </Row>
            </div>

            <Title text="订单流水" left={5} />
            <Timeline className="timeline-box">
              {infoData && infoData.logs && infoData.logs.length ? (
                infoData.logs.map((item, index) => {
                  return (
                    <Timeline.Item key={index}>
                      <span>{item.createDate}</span>
                      {item.content}
                    </Timeline.Item>
                  );
                })
              ) : (
                <Timeline.Item>暂无</Timeline.Item>
              )}
            </Timeline>

            <Title text="系统信息" left={5} />
            <Row className="label-box" gutter={40}>
              <Col className="label-col" span={6}>
                <WHLabel title="创建人" text={infoData && infoData.createByName} />
              </Col>

              <Col className="label-col" span={6}>
                <WHLabel title="创建时间" text={infoData.createDate} />
              </Col>
              <Col className="label-col" span={6}>
                <WHLabel title="系统来源" text={infoData.sourceTitle} />
              </Col>
              <Col className="label-col" span={24}>
                <WHLabel title="备注" text={infoData.remarks} />
              </Col>
            </Row>
          </div>
        </div>
      </Spin>
    );
  }
}

export default connectRouter(connect(InsuranceOrderInfo));
